<template>
    <div class="warp">
        <el-row justify="center">


            <el-col :span="10">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>用户注册</span>
                            <el-button class="button" text @click="login">已有账号？去登录</el-button>
                        </div>
                    </template>

                    <!-- form表单 -->
                    <el-form :model="formData" label-width="120px" :rules="rules" ref="form1">
                        <el-form-item label="手机号" prop="tel">
                            <el-input v-model="formData.tel" />
                        </el-form-item>
                        <el-form-item label="昵称" prop="nickName">
                            <el-input v-model="formData.nickName" />
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="formData.password" type="password" />
                        </el-form-item>
                        <el-form-item label="确认密码" prop="password2">
                            <el-input v-model="formData.password2" type="password" />
                        </el-form-item>
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="formData.email" />
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="submitForm(form1)">注册</el-button>
                            <el-button @click="resetForm(form1)">重置</el-button>
                        </el-form-item>
                    </el-form>

                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
  
<script setup lang="ts">
import { ref, reactive } from "vue"
import { ElMessage } from 'element-plus'
import { Md5 } from 'ts-md5'
import { userApi } from '@/api'
import { useRouter } from "vue-router"
const router = useRouter()
const form1 = ref()
const formData = reactive({
    tel: "13721337351",
    password: "Zz123123",
    password2: "Zz123123",
    nickName: "123",
    email: "11@qq.com"
})

const rules = reactive<any>({
    // 此处的name 代表的是form表单中的prop="name" 属性的名称
    tel: [
        { required: true, message: '手机号不能为空', trigger: 'blur' },
        { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '格式不正确', trigger: 'blur' }
    ],
    nickName: [
        { required: true, message: '昵称必填', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '密码必填', trigger: 'blur' },
        { pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/, message: '必须包含大小写字母和数字的组合', trigger: 'blur' }
    ],
    password2: [
        { required: true, message: '密码必填', trigger: 'blur' },
        { pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/, message: '必须包含大小写字母和数字的组合', trigger: 'blur' }
    ],
    email: [
        { required: true, message: '邮箱必填', trigger: 'blur' },
        { type: 'email', message: '邮箱格式不对', trigger: 'blur' }
    ]
})

const fromSubmit = () => {
    if (formData.password != formData.password2) {
        ElMessage.error('两次密码不一致')
        return
    }
    //md5加密后的密码
    const md5Pwd = Md5.hashStr(formData.password).toUpperCase();
    // console.log(md5Pwd);

    userApi.register.call({
        tel: formData.tel, password: md5Pwd,
        nickName: formData.nickName, email: formData.email
    }).then(res => {
        console.log(res);

    })
}

const resetForm = (formEl: any) => {
    if (!formEl) return
    formEl.resetFields()
}

const login = ()=>{
    router.push({name:"user-login"})
}
const submitForm = async (formEl: any) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            fromSubmit()
        } else {

        }
    })
}
// const onSubmit = () => {
//     console.log(formData);
// }


</script>

<style scoped>
.warp {
    width: 100%;
    height: 100%;
    position: fixed;
    background: url("/images/bg.jpeg");
    background-size: 100% 100%;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 480px;
    margin-top: 40%;
}
</style>